<template>
	<view class="content">
		<scroll-view :scroll-y="true" style="height: 90vh;">
			<view class="shop">
				<view class="" v-for="(item,i) in orderInfo.orderli" :key="i">
					<view class="shop-item gui-flex">
						<view class="shop-img gui-flex gui-align-items-center gui-justify-content-center">
							<image style="border-radius: 16rpx;" :src="tool.img(item.guiimage)" mode="aspectFill">
							</image>
						</view>
						<view class="shop-content">
							<view class="shop-name" style="margin-left: 15rpx;">
								{{ item.name }}
							</view>
							<view class="shop-idcr" style="margin-left: 15rpx;">
								<text>{{ item.xname }}</text><text style="padding: 0 20rpx;">{{ item.banji }}</text>
							</view>
							<view class="shop-footer">
								<view class="shop-price" style="margin-left: 15rpx;">
									￥{{ item.price }}
								</view>
								<view class="shop-num">
									x{{ item.num }}
								</view>
							</view>
						</view>
					</view>
					<view class="bo">
						总金额：￥{{orderInfo.price}}
					</view>
				</view>
			</view>
			<view class="order-item">
				<view class="order">
					<view class="order-left">
						订单号
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<text>{{ orderInfo.orn }}</text>
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						取货方式
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<text>{{ orderInfo.pei_text }}</text>
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						订单状态
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<text v-if="orderInfo.status == 'wei'">未付款</text>
						<text v-if="orderInfo.status == 'guan'">已关闭</text>
						<text v-if="orderInfo.status == 'dai'">待发货</text>
						<text v-if="orderInfo.status == 'yi'">已发货</text>
						<text v-if="orderInfo.status == 'wan'">已完成</text>
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						下单时间
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<text>{{ orderInfo.createtime }}</text>
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						运费
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<text v-if="orderInfo.yunfei">{{ orderInfo.yunfei }}</text>
						<text v-else>0元</text>
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						满减规则
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<text v-if="orderInfo.manjian">{{ orderInfo.manjian }}</text>
						<text v-else>暂无</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer-submit" v-if="orderInfo.status != 'wan' || orderInfo.status != 'guan'">
			<view class="order-btn">
				<view class="pay o-btn" v-if="orderInfo.status == 'wei'" @tap.stop="orderPay(orderInfo)">
					立即支付
				</view>
				<view class="pay o-btn" v-if="orderInfo.status == 'yi'&& orderInfo.pei == 'kuai'" @tap.stop="orderKuai(orderInfo)">
					查询快递
				</view>
				
				<view class="pay o-btn" v-if="orderInfo.status == 'yi' && orderInfo.pei == 'kuai'" @tap.stop="takeGood(orderInfo)">
					确认收货
				</view>
				<view class="pay o-btn" v-if="orderInfo.status == 'yi' || orderInfo.status == 'dai' && orderInfo.pei == 'kuai'" @tap.stop="tuiGood(orderInfo)">
					发起退款
				</view>
			</view>
		</view>
		<u-popup :show="tuishow" round='10' mode="bottom" @close="tuiclose" @open="tuiopen">
			<view class="tuibox">
				<view class="tui-title">
					退货
				</view>
				<scroll-view class="tui-content" :scroll-y="true">
					<view class="tui-list" v-for="(item,i) in tuiList" :key="i">
						<gui-radio @change="itemChange" checkedColor="#8c540f" :parameter="[i]"></gui-radio>
						<view class="tui-left">
							<image style="border-radius: 16rpx;" :src="tool.img(item.goods_images[0])"
								mode="aspectFill">
							</image>
						</view>
						<view class="tui-right">
							<view class="tui-s-title">
								{{ item.name }}
							</view>

							<view class="tui-s-num">
								<view class="tui-price">
									￥{{ item.sale_price }}
								</view>
								<view class="tui-num">
									<u-number-box :min="0" :max="item.total_num" v-model="item.num"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="tui-footer">
					<view class="tui-btn" @tap="tui">
						申请退货
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import tool from '../../utils/tool.js'
	export default {
		data() {
			return {
				tuishow: false,
				tool: tool,
				goodsarr: [],
				shopinfo: '',
				roominfo: '',
				addressInfo: '', //地址信息
				order_id: '', //订单ID
				orderInfo: '', //订单信息
				couponShow: false,
				coupontext: '暂无可使用的优惠券',
				youprice: 0,
				couponli_id: '',
				peiType: [],
				peiIndex: -1,
				peiInfo: '',
				yunfei: 0,
				tel: '',
				remark: '',
				num: '',
				id: '',
				tuiList: [],
				goodsArr: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.GetDetails()
		},
		methods: {
			itemChange(e) {
				let index = e[1][0]
				this.tuiList[index].radio = e[0]
				console.log(e)
			},
			orderKuai(item) { //查询快递
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/delivery', {
					order_id: item.id
				}, (result) => {
					uni.hideLoading()
					uni.showModal({
						title: '快递单号',
						content: result.data.kuandan,
						confirmText: '复制单号',
						success: (res) => {
							if (res.confirm) {
								// 将文本复制到剪贴板
								uni.setClipboardData({
									data: result.data.kuandan, // 需要复制的文本内容
									success(res) {
										console.log('复制成功');
									},
									fail(err) {
										console.error('复制失败', err);
									}
								});
							} else {
			
							}
						}
					})
				})
			},
			tuiGood(item) { //发起退款
				console.log(item, '?')
				uni.navigateTo({
					url: '/pages/refund/index?order_id=' + item.id
				})
			
			},
			tui() {
				this.goodsArr = []
				this.tuiList.filter((item => {
					if (item.radio) {
						this.goodsArr.push({
							id: item.id,
							num: item.num
						})
					}
				}))
				if (this.goodsArr.length == 0) {
					uni.showToast({
						title: '请至少选择一个商品',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('goods/subRegoods', {
					goodsArr: this.goodsArr,
				}, (result) => {
					uni.hideLoading()
					if (result.code == 1) {
						uni.showToast({
							title: '请在退货订单中查看退货审核状态',
							icon: 'none'
						})
						this.tuishow = false
					}
				})
			},
			tuiorder() {
				this.tuishow = true
			},
			tuiclose() {
				this.tuishow = false
			},
			tuiopen() {
				this.tuishow = true
			},
			orderdel(item) {
				console.log(item)
				uni.showModal({
					title: '是否删除此订单',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '正在加载'
							})
							this.$http.Post('goods/delOrder', {
								oid: item.id,
							}, (result) => {
								uni.hideLoading()
								uni.showToast({
									title: '订单删除成功',
									icon: 'success'
								})
								uni.navigateBack()
							})
						} else {

						}
					}
				})
			},
			takeGood(item) { //快递收货
				uni.showModal({
					title: '确认收货',
					content: '是否确认收货',
					success: (res) => {
						if (res.confirm) {
							this.$http.Post('order/takeGood', {
								order_id: item.id
							}, (result) => {
								uni.showToast({
									title: '收货成功',
									icon: 'success'
								})
								setTimeout(res => {
									this.page = 1
									this.GetList()
								}, 500)
							})
						} else {
			
						}
					}
				})
			},
			orderPay(item) {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/againOrderPay', {
					order_id: item.id,
				}, (result) => {
					uni.hideLoading()
					let paymentInfo = result.data
					uni.navigateTo({
						url: '/pages/buy/pay?url=' + paymentInfo.code_url + '&order_id=' + this.order_id
					})
					return
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: paymentInfo.timeStamp,
						nonceStr: paymentInfo.nonceStr,
						package: paymentInfo.package,
						signType: paymentInfo.signType,
						paySign: paymentInfo.paySign,
						success(res) {
							uni.showToast({
								title: "支付成功"
							});
							setTimeout(res => {
								this.page = 1
								this.GetList()
							}, 300)
						},
						fail(err) {
							uni.showToast({
								title: "支付失败",
								icon: 'error'
							});
						},
					});
				})
			},
			GetDetails() {
				this.$http.Post('order/orderInfo', {
					order_id: this.id
				}, (result) => {
					this.orderInfo = result.data
					console.log(result.data, '??')
				})
			}
		}
	}
</script>

<style>
	.content {
		position: relative;
	}

	.address {
		padding: 0 35rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.address-content {
		font-size: 28rpx;
		color: #999;
	}

	.shop {
		margin-top: 20rpx;
	}

	.shop-item {
		background-color: #fff;
		padding: 25rpx 35rpx;
		height: 250rpx;
	}

	.shop-img {
		width: 35%;
		height: 100%;
	}

	.shop-img>image {
		width: 220rpx;
		height: 220rpx;
	}

	.shop-content {
		position: relative;
		width: 65%;
		height: 100%;
		/* padding: 0 25rpx 0 25rpx; */
	}

	.shop-name {
		font-size: 30rpx;
		color: #3c3c3c;
		padding: 20rpx 0 0 0;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.shop-idcr {
		font-size: 26rpx;
		color: #999;
		padding: 15rpx 0;
	}

	.shop-footer {
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-price {
		font-size: 32rpx;
		color: #ff5502;
	}

	.shop-num {
		font-size: 32rpx;
		color: #999;
	}

	.bai {
		width: 100%;
		text-align: right;
	}

	.order-item {
		margin-top: 20rpx;
	}

	.order {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 35rpx;
		background-color: #fff;
	}

	.order-left {
		color: #bebebe;
		width: 20%;
	}

	.order-right {
		width: 70%;
		display: flex;
		justify-content: flex-end;
	}

	.neworder {
		font-size: 32rpx;
		color: #ff5502;
	}

	.footer-submit {
		z-index: 9999;
		width: 100%;
		bottom: 0;
		position: fixed;
		background-color: #fff;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.submit-price {
		font-size: 28rpx;
		color: #ff5502;
		margin-left: 35rpx;
	}

	.order-btn {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 0;
		color: #3c3c3c;
	}

	.submit-btn {
		width: 260rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #ecc279;
		margin-right: 35rpx;
		border-radius: 999rpx;
	}

	.coupon-box {
		width: 100%;
		height: 700rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.coupon-title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}

	.coupon-list {
		padding: 25rpx 35rpx;
	}

	.c-list {
		padding: 20rpx 0;
	}

	.coupon-bottom {
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		height: 90rpx;
	}

	.coupon-btn {
		margin: 0 auto;
		width: 90%;
		height: 100%;
		border-radius: 999rpx;
		background-color: #fc6766;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}

	.ws {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		margin: 20rpx 0 10rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.neworder_1 {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		display: flex;
		justify-content: flex-end;
	}

	.pay {
		font-size: 26rpx;
		border: 1rpx solid #ccc;
		padding: 10rpx 35rpx;
		border-radius: 999rpx;
		width: fit-content;
	}

	.o-btn {
		margin-left: 20rpx;
	}

	.tuibox {
		position: relative;
		height: 800rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.tui-title {
		width: 100%;
		height: 100rpx;
		color: #3c3c3c;
		font-size: 34rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-content {
		margin: 20rpx auto;
		width: 90%;
		height: 560rpx;
	}

	.tui-footer {
		position: absolute;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 0;
	}

	.tui-btn {
		border-radius: 999rpx;
		width: 94%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fc6564;
		color: #fff;
		font-size: 30rpx;
	}

	.tui-list {
		width: 100%;
		display: flex;
		height: 250rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #e6e6e6;
		padding-bottom: 35rpx;
	}

	.tui-left {
		width: 35%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-left>image {
		width: 250rpx;
		height: 250rpx;
	}

	.tui-right {
		margin-left: 30rpx;
		width: 56%;
		height: 100%;
		position: relative;
	}

	.tui-s-num {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tui-price {
		width: 35%;
		height: 100%;
		display: flex;
		align-items: center;
		color: #fc6564;
	}

	.tui-num {
		width: 65%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.tui-s-title {
		font-weight: bold;
		font-size: 28rpx;
	}

	.bo {
		padding: 25rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #ff5502;
		border-top: 1rpx solid #f5f5f5;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: flex-end;
	}
</style>
